<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <my-header title="购物车案例"></my-header>

    <!-- 商品 Item 项组件 -->
    <my-goods 
    v-for="item in cart"
    :key="item.id"
      :id="item.id" 
      :title="item.goods_name" 
      :thumb="item.goods_img" 
      :price="item.goods_price" 
      :count="item.goods_count" 
      :state="item.goods_state"
      @stateChange="getState" 
      @countChange="getCount"></my-goods>

    <!-- Foote 区域 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import {mapState} from "vuex"

import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyGoods from './components/MyGoods.vue'

export default {
  name: 'App',
  methods: {
    // 商品的选中状态发生了变化
    getState(e) {
      // {id: 1, value: false}
      console.log(e)
      this.$store.commit('shopcar/updateStateCart',e)
    },
    // 商品的数量发生了变化
    getCount(e) {
      // {id: 1, value: 2}
      console.log(e)
      this.$store.commit("shopcar/updateCartCount",e)
    },
  },
  components: {
    MyHeader,
    MyFooter,
    MyGoods,
  },
  computed:{
    ...mapState('shopcar',['cart'])
  },
  created(){
    this.$store.dispatch('shopcar/getCartList')
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 46px 0 50px 0;
}
</style>